<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #fu {
      width: 400px;
      height: 400px;
      background: skyblue;
      position: absolute;
      top: 200px;
      left: 200px;
      border: 10px solid red;
      overflow: auto;
      margin-left: 100px;
    }

    #zi {
      position: absolute;
      width: 800px;
      height: 800px;
      /* padding: 20px; */
      background: springgreen;
      top: 100px;
      left: 100px;
    }

    #btn {
      position: fixed;
      top: 400px;
      left: 10px;
    }
  </style>
</head>

<body>
  <div id="fu">
    <div id="zi">


    </div>
    <button id="btn">点击获取滚动距离</button>
  </div>
  <script>
    // clientWidth和clientHeight  元素的宽高    元素宽度+padding宽度-左右滚动条的宽度
    var fu = document.getElementById("fu");
    document.write(fu.clientWidth + "---" + fu.clientHeight + "<br/>")
    // offsetWidth和offsetHeight   获取元素的    宽度和高度 +padding+border 
    document.write(fu.offsetWidth + "---" + fu.offsetHeight + "<br/>")
    // scrollWidth和scrollHeight 元素的宽高实际宽高 计算元素的隐藏的滚动部分
    document.write(fu.scrollWidth + "---" + fu.scrollHeight + "<br/>")

    // offsetLeft和offsetTop   元素相对于父元素的偏移量 offsetLeft 左偏移   offsetTop 上偏移量
    document.write(fu.offsetLeft + "---" + fu.offsetTop + "<br/>")
    var zi = document.getElementById("zi")
    document.write(zi.offsetLeft + "---" + zi.offsetTop + "<br/>")
    //clientTop 和clientLeft  获取元素的边框 
    document.write(fu.clientTop + "---" + fu.clientLeft + "<br/>")
    //scrollLeft 和scrollTop 获取元素滚动距离
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      document.write(fu.scrollLeft + "---" + fu.scrollTop + "<br/>")
    }
    //1.获取整个文档的兼容写法document.documentElement || document.body
    // document.body.style.backgroundColor = "skyblue"
    // document.documentElement.style.backgroundColor = "skyblue"
    var mybody = document.documentElement || document.body;
    console.log(mybody)
  </script>

</body>

</html>